<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回调函数</title>
</head>
<body>
    <button id="hd">button</button>
</body>
</html>
<script>
    //回调函数
    // document.getElementById('hd').addEventListener('click',() => alert('通过验证'));
    //通过回调函数递增计算
    // let hd = [1,2,3].map(item => item += 10);
    // console.log(hd);

    //展开语法
    //展开语法或者称为点语法的体现就是  收   放    作为值的时候 就是放   作为接收变量的时候就是收
    // let hd = [1,2,3];
    // let [a,b,c] = [...hd];
    // console.log(a,b,c);
    // let [a,...hd] = [1,2,3];
    // console.log(a)
    // console.log(hd)

    //使用展开语法可以替代arguments来接收任意数量的参数

    // function hd(...args){
    //     console.log(args)
    // }
    // hd("后盾人",1,2,3);

    //也可以用于接收部分参数
    // function hd(site,...args){
    //     console.log(site,args)
    // }
    // hd("后盾人",1,2,3);

    //使用... 可以接受传入的多个参数合并为数组
    // function sum(...params){
    //     return params.reduce((pre,cur) => pre + cur);
    // }
    // console.log(sum(1,2,3,4,5))

    //多个参数的时候   ...参数必须放在后面，下面计算购物车的商品折扣
    // function sum(dis = 0 , ...params){
    //     let total = params.reduce((a,b) => a + b);
    //     return total * (1 - dis);
    // }
    // console.log(sum(0.1,100,200,300));

    //使用函数来解析标签字符串
    function hd(str,...values){
        //str是模板字符串中的非变量 一般会多一个  最后一个是空字符串
        console.log(str)
        console.log(values)
    }
    let name = '后盾人',url='houdunren.com';
    
    hd `站点${name}-${url}`;
</script>